<div ng-controller="tableajaxCtrl">

  <div class="panel panel-default">
    <div class="panel-body">
      <!-- ad_example_start -->
      <!-- ========== Simple Table Implementation ========== -->
      <ad-table-ajax table-name="artistsTable"
                     column-definition="artistsColumnDef"
                     table-classes="table table-bordered"
                     page-sizes="[5, 20, 50]"
                     pagination-btn-group-classes="pagination pagination-xs"
                     items-not-found-message="Artists Not Found"
                     ajax-config="artistsAjaxConfig">
      </ad-table-ajax>
      <!-- ad_example_end -->
    </div>
  </div>

  <!-- ad_example_start -->
  <!--========== Advanced Implementation with search ========== -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <input type="text" class="form-control" ng-change="searchArtist()" ng-model="artistSearchKey">
            <span class="input-group-addon">
              <i class="glyphicon glyphicon-search"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-body">
      <ad-table-ajax table-name="artistsTableSearch"
                     column-definition="artistsColumnDefSearch"
                     table-classes="table table-bordered"
                     page-sizes="[5, 20, 50]"
                     pagination-btn-group-classes="pagination pagination-sm"
                     ajax-config="artistsAjaxConfigSearch"
                     page-loader="methods.pageLoader"
                     row-expand-callback="populateShoppingMessage"
                     row-class-provider="checkRowSelected"
                     row-expand-template="src/tableajax/docs/artistMoreInfo.html">
      </ad-table-ajax>
    </div>
  </div>
  <!-- ad_example_end -->
</div>